/*
 * Copyright (c) Facebook, Inc. and its affiliates.
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.chart-container {
  margin: 1rem 0;
  width: 100%;
  height: auto;
}

@media (min-width: 576px)  {
  .chart-container {
      min-width: 650px;
  }
}

@media (max-width: 576px)  {
  .chart-container {
      min-width: 650px;
  }
}

.highcharts-container {
  overflow: visible !important;
}

.chart-dark-mode {
  .highcharts-container {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: left;
    line-height: normal;
    z-index: 0; /* #1072 */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    font-size: 12px;
  }

  .highcharts-background {
    fill: #282c34;
  }

  .highcharts-title, .highcharts-subtitle, .highcharts-axis-title {
    fill: white;
    font-weight: normal;
  }

  .highcharts-yaxis-grid .highcharts-grid-line {
    stroke-width: 1px;
    stroke: $gray-700;
  }
}

.highcharts-figure, .highcharts-data-table table {
  position: relative;
  margin: 0rem 0;
  overflow: auto;
}

.highcharts-data-table table {
	font-family: Verdana, sans-serif;
	border-collapse: collapse;
	border: 1px solid #EBEBEB;
	margin: 5px auto;
	text-align: center;
}

.highcharts-title {
  fill: #434348;
  font-family: Menlo, sans-serif;
}

// **** Sparkline Table ****

.sparkline-table {
  td, th {
    padding: 0.5rem;
    border-bottom: 1px solid silver;
    height: 2.5rem;
    font-size: 12px;
  }

  .cell-info{
    position:relative;
  }

  .description-tooltip{
    display:none;
    position:absolute;
    z-index:100;
    border: 1px;
    background-color: $white;
    border-style:solid;
    border-width: 1px;
    border-color: $primary;
    padding: 5px;
    color: $primary;
    top:32px;
    left:-40px;
  }

  .cell-info:hover span.description-tooltip{
    display:block;
  }
}

.description-tooltip2 {
  font-size: smaller;
}

/*** SingleChart Modal ****/

.wrap-modals {
  position: relative;
}

.modal_trends {
  background-color: rgba(0,0,0,0.5);
  position: sticky;
  height: 50vh;
  width: 100%;
  top: 36px;
  right: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 10;
  button {
    border-radius: 10px;
    font-size: small;
  }
}
